<!--公告通知-->
<template>
  <div class="app-container my-msg-container">
    <!--列表-->
    <c-list
      :data-source="list"
      empty="暂无消息"
      item-layout="vertical"
      :hover="false"
      padding="0 10px"
      class="msg-list-container">
      <template #header>
        <table-toolbar :create="false" :remove="false" @refresh="initData">
          <template>
            <el-link v-if="unReads.length>0" type="primary" :underline="false" @click="handleSettingReadAll">全部已读</el-link>
          </template>
          <template slot="rightTool">
            <search v-model="listQuery.noticeTitle" :placeholder="'请输入'+(listQuery.noticeType===1?'通知公告标题':'系统消息标题')" @search="handleFilter" />
          </template>
        </table-toolbar>
      </template>
      <template #item="{item}">
        <c-item :title-noraml="true">
          <template #titleTag>
            <dot v-if="item.readFlag===0" />
          </template>
          <template #title>
            <span v-if="item.noticeType===1" class="common-cursor" @click="handleLook(item.id)">{{ item.noticeTitle }}</span>
            <span v-if="item.noticeType===2" class="common-cursor">{{ item.noticeAbstract?item.noticeAbstract:item.noticeTitle }}</span>
          </template>
          <template v-if="item.noticeType===2 && item.moduleType!=='default'" #extra>
            <el-link type="primary" :underline="false" @click.stop="handleEnterMsg(item)">进入</el-link>
          </template>
          <template>
            <div class="tr color-default" style="font-size: 12px;">
              {{ item.createdBy | optionUserFormat }}.发布于.{{ item.sendTime | formatDate }}
            </div>
          </template>
        </c-item>
      </template>
      <template v-show="total>0" #pagination>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
      </template>
    </c-list>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    type: {
      type: String,
      default: 'notice'
    }
  },

  data() {
    return {
      unReads: [],
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        name: undefined,
        sort: this.common.SORT_DEFAULT
      }
    }
  },
  computed: {
  },
  watch: {
    type: function(val) {
      this.initData()
    }
  },
  created() {
    this.initData()
  },
  methods: {
    handleTabClick() {
    },
    handleLook(id) {
      this.$router.push({ path: '/message/sendDetails', query: { id: id }})
    },

    initData() {
      var noticeType = 1
      if (this.type === 'system') {
        noticeType = 2
      }
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        noticeType: noticeType
      }
      this.handleFilter()
      this.fetchUnReadNotice()
    },

    // 表格自带方法开始
    /**
     * 表格列排序
     */
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    // 表格自带方法结束
    async fetchUnReadNotice() {
      if (this.listQuery.noticeType === 1) {
        this.unReads = (await this.$store.dispatch('currentUserUnReadNotice')).notice
      }
      if (this.listQuery.noticeType === 2) {
        this.unReads = (await this.$store.dispatch('currentUserUnReadNotice')).system
      }
    },

    async fetchData() {
      const response = await this.$store.dispatch('currentUserNoticeSendPage', this.listQuery)
      this.list = response.records
      this.total = response.total
    },

    /**
     * 搜索
     */
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleSettingReadAll() {
      this.$confirm('此操作将标注全部已读, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('currentUserNoticeSendSetRead', this.listQuery.noticeType).then(response => {
          this.handleFilter()
          this.handleNotify()
        }).catch(() => {})
      }).catch(() => { })
    },
    handleNotify() {
      this.$store.dispatch('notifyUpdateNoticeData', true)
    },
    handleEnterMsg(data) {
      // 后期根据moduleType判断模块，解读json数据 noticeContent 跳转不同模块
      console.log(data)
      this.$modal.msgWarning('后期根据moduleType判断模块，解读json数据 noticeContent 跳转不同模块')
    }

  }
}
</script>
<style lang="scss" scoped>
.my-msg-container{
  .table-container{
    padding: 0 10px;
  }
  .msg-list-container{

  }
}
</style>
